<script setup lang="ts">
import { onMounted, ref, onUnmounted } from "vue";
import jj1 from "./images/4149538.gif";
import jj2 from "./images/4151255.jpg";
import jj3 from "./images/4376072.png";
import { inAnimateClassOptions,outAnimateClassOptions,intervalTimeOptions } from './animate'
const imgList = ref([jj2, jj3, jj1]);
const imgList2 = ref([jj1, jj2, jj3]);

const isShow = ref(-1);

const inAnimateClass = ref('fadeInDown')
const outAnimateClass = ref('fadeOutDown')
const intervalTime = ref(8)

let timer = ref<any>(null);
const startAnimate = ()=>{
    let i = 0;
    timer.value = setInterval(() => {
        if (i == 3) {
        i = 0;
        }
        isShow.value = i == 3 ? 0 : i;
        i++;
    }, 1000 * intervalTime.value);
}
const changeAnimateClass = ()=>{
   clearInterval(timer.value); 
   isShow.value = -1;
   startAnimate()
}
onMounted(() => {
  startAnimate()
});
onUnmounted(() => {
   clearInterval(timer.value); 
});
</script>

<template>
  <div class="container">
    <div class="configOption">
        <div class="optionItem">
            <div>切换间隔：</div>
            <el-select v-model="intervalTime" placeholder="请选择" @change="changeAnimateClass">
                <el-option v-for="item in intervalTimeOptions" :key="item" :label="item" :value="item"></el-option>
            </el-select>
        </div>
        <div class="optionItem">
            <div>入场动画：</div>
            <el-select v-model="inAnimateClass" placeholder="请选择" @change="changeAnimateClass">
                <el-option v-for="item in inAnimateClassOptions" :key="item" :label="item" :value="item"></el-option>
            </el-select>
        </div>
        <div class="optionItem">
            <div>出场动画：</div>
            <el-select v-model="outAnimateClass" placeholder="请选择" clearable>
                <el-option v-for="item in outAnimateClassOptions" :key="item" :label="item" :value="item"></el-option>
            </el-select>
        </div>
        
    </div>
    <div class="imgDiv">
      <img
        v-for="(item, index) in imgList2"
        :ref="`itemItem_${index}`"
        :key="index"
        :src="item"
        alt=""
        :data="index"
        class="imgItem"
        :class="isShow == index ? `animate__animated animate__${outAnimateClass}` : ''"
        :style="{
          zIndex:
            isShow == index
              ? 999 - index
              : isShow > index
              ? isShow == imgList2.length - 1
                ? 99 - index
                : index
              : 9 - index
        }"
      />
    </div>
    <div class="imgDiv">
      <img
        v-for="(item, index) in imgList"
        :ref="`itemItem_${index}`"
        :key="index"
        :src="item"
        alt=""
        :data="index"
        class="imgItem"
        :class="isShow == index ? `animate__animated animate__${inAnimateClass}` : ''"
        :style="{
          zIndex:
            isShow == index
              ? 9999 - index
              : isShow > index
              ? isShow == imgList.length - 1
                ? 999 + index
                : 99 + index
              : 9 + index
        }"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 700px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.configOption{
    display: flex;
    justify-content: center;
    align-items: center;
    .optionItem{
        margin: 0 10px;
    }
}

.imgDiv {
  width: 600px;
  height: 400px;
  margin-top: 10px;
  overflow: hidden;
  position: relative;
  .imgItem {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
</style>
